<html class="js no-touch csstransitions" lang="en">
	
	<include file="Public:Head" />

	<body class="no-trans fixed-header-on" style="height:100%">
		<if condition="$condition eq 1" >
			<include file="Public:loginHeader" />
		<else />
			<include file="Public:notloginHeader" />
		</if>

		<div id="aboutSec" class="section clearfix " style="min-height: 85.5%; margin-top: 5%;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<h1 id="search" class="title text-center"><span>Upload Primer</span></h1>
						<p class="lead text-center">Primer Information Manager</p>
						
						<div class="row">
						
							<div class="col-md-1"></div>
							<div class="col-md-10">
								<div class="main">


									<br /><br />
										
									<div class="main_parameters">
										
											<fieldset class="basic">

												<ul id="myTab" class="nav nav-tabs"><span class="required" style="float: right;position: relative;bottom: -15px; font-size: 12px;">* 为必填项</span>
													<li class="active"><a href="#upload" data-toggle="tab">Upload</a></li>
													<li><a href="#upload-file" data-toggle="tab">Upload File</a></li>
												</ul>

												<br />

												<div id="myTabContent" class="tab-content">
													<div class="tab-pane fade in active" id="upload">
														<form id="upload-form" class="form-horizontal" action="{:U('Upload/upload')}" method="POST">

															<div class="form-group">
																<label class="col-sm-2 control-label">Species<span class="required">*</span></label>
																<div class="col-sm-10">
																	<select id="species" name="species" class="form-control" style="padding-left: 8px;">
																		<option value="Human">Human</option>
																		<option value="Mouse">Mouse</option>
																		<option value="Others">Others</option>
																	</select>
																</div>
															</div>
															<div class="form-group">
																<label for="forward-gene" class="col-sm-2 control-label">Gene<span class="required">*</span></label>
																<div class="col-sm-10" style="padding-top: 4px;">
																	<input type="text" class="form-control" id="gene" name="gene" autocomplete="off" placeholder="gene" onfocus="focusOn(this)" onblur="focusOff(this)" />
																	<div class="error-tips error-gene" style="display:none;">基因名不能为空</div>
																</div>
															</div>
															<div class="form-group">
																<label for="forward-primer" class="col-sm-2 control-label">Forward Primer<span class="required">*</span></label>
																<div class="col-sm-10" style="padding-top: 1px;">
																	<input type="text" class="form-control" id="forward-primer" name="forwardprimer" autocomplete="off" placeholder="Forward Primer" onfocus="focusOn(this)" onblur="checkForwardPrimer(this)"/>
																	<div class="error-tips error-forwardprimer" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="reverse-primer" class="col-sm-2 control-label">Reverse Primer<span class="required">*</span></label>
																<div class="col-sm-10" style="padding-top: 1px;">
																	<input type="text" class="form-control" id="reverse-primer" name="reverseprimer" autocomplete="off" placeholder="Reverse Primer" onfocus="focusOn(this)" onblur="checkReversePrimer(this)" />
																	<div class="error-tips error-reverseprimer" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="tm" class="col-sm-2 control-label">TM<p class="small-font" style="font-style: oblique;"></p></label>
																<div class="col-sm-10" style="padding-top: 1px;">
																	<input type="text" class="form-control" id="tm" name="tm" placeholder="TM" autocomplete="off" onblur="" />
																	<div class="error-tips error-tm" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="productgc" class="col-sm-2 control-label">Product GC(%)<p class="small-font" style="font-style: oblique;"></p></label>
																<div class="col-sm-10" style="padding-top: 1px;">
																	<input type="text" class="form-control" id="productgc" name="productgc" placeholder="Product GC" autocomplete="off" onblur="" />
																	<div class="error-tips error-productgc" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="productlength" class="col-sm-2 control-label">Product Length<p class="small-font" style="font-style: oblique;"></p></label>
																<div class="col-sm-10" style="padding-top: 1px;">
																	<input type="text" class="form-control" id="productlength" name="productlength" placeholder="Product Length" autocomplete="off" onblur="" />
																	<div class="error-tips error-productlength" style="display:none;"></div>
																</div>
															</div>

															<div class="form-group">
																<label for="location" class="col-sm-2 control-label">Location<p class="small-font" style="font-style: oblique;">(example:loc_lab104)</p></label>
																<div class="col-sm-10" style="padding-top: 10px;">
																	<input type="text" class="form-control" id="location" name="location" placeholder="Location" autocomplete="off" onblur="checkLocation(this)" />
																	<div class="error-tips error-location" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="identifier" class="col-sm-2 control-label">Identifier<p class="small-font" style="font-style: oblique;">(example:Id_xxx)</p></label>
																<div class="col-sm-10" style="padding-top: 10px;">
																	<input type="text" class="form-control" id="identifier" name="identifier" placeholder="Identifier" autocomplete="off" onblur="checkIdentifier(this)" />
																	<div class="error-tips error-identifier" style="display:none;"></div>
																</div>
															</div>
															<div class="form-group">
																<label for="describe" class="col-sm-2 control-label">Describe</label>
																<div class="col-sm-10" style="padding-top: 8px;">
																	<textarea class="form-control" id="describe" placeholder="Describe" name="describe" autocomplete="off" ></textarea> 
																</div>
															</div>
														</form>

														<br />
														
														<div style="text-align: center;">
															<button id="upload-btn" type="button" class="btn btn-default" style="width: 20%; background-color: #f0f0f0" onclick="submitUpload(this)">Upload</button>

															<button type="button" class="btn btn-default" onclick="uploadExample(this)">
																<span>?</span>
															</button>

															<button id="upload-btn" type="button" class="btn btn-default" onclick="myUploadReset(this)"> Reset </button> 
														</div>
													</div>

													<div class="tab-pane fade" id="upload-file">
														<div class="form-group">
															<div style="padding-left: 3%;"><h4>第一步：</h4> </div>
															<center>
																<form class="form-horizontal" action="" method="" >  
																	<div class="form-group ">  
																		<label class="col-sm-2 control-label">下载模板:</label>  

																		<!-- <p class="help-block">仅支持csv格式，大小不超过2.0M</p>   -->

																		<div class="col-sm-10 input-group">
																			<span class="input-group-btn">
																				<button class="btn btn-default" style="border-radius: 0px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" type="button" onclick="downloadExample();"><span class="glyphicon glyphicon-download-alt"></span> Download</button>
																			</span>
																			<input class="form-control" style="width:98%;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" disabled="disabled" value="下载上传文件模板，参照格式填写引物信息" type="text">
																		</div>
																	</div>
																</form>
															</center>
														</div>
														<div class="form-group">
															<div style="padding-left: 3%;"><h4>第二步：</h4> </div>
															<form id="uploadfile-form" class="form-horizontal" action="{:U('Upload/uploadFile')}" method="POST" enctype="multipart/form-data">  

																<center>
																	
																	<div class="form-group">  
																		<label class="col-sm-2 control-label">选择文件:<p class="small-font" style="font-style: oblique;">(Only CSV)</p></label>  

																		<!-- <p class="help-block">仅支持csv格式，大小不超过2.0M</p>   -->

																		<div class="col-sm-10 input-group" style="padding-top: 10px;">
																			<input id="lefile" type="file" name="file" style="display:none" onchange="change(this);">
																			<span class="input-group-btn">
																				<button class="btn btn-default" style="border-radius: 0px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" type="button" onclick="browse();"><span class="glyphicon glyphicon-folder-open"></span> Browse </button>
																			</span>
																			<input id="filename" class="form-control" style="width:98%;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" disabled="disabled" type="text">
																		</div>
																		<div class="error-tips error-filename" style="display:none;"></div>

																		<br />

																    	<div style="text-align: center;">
																			<button id="upload-btn" type="button" class="btn btn-default" style="width: 20%; background-color: #f0f0f0" onclick="submitUploadFile(this)">Upload File</button>
																		</div>
																	</div>
																</center>
															</form>
														</div>
													</div>
												</div><br />

											</fieldset>

									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>